// @flow
import React, { Component } from 'react';
import Icon from 'react-icon-base';
import './FullSceenProgress.scss';

type Props = { visible: boolean };

const FullSceenProgress = ({ visible }: Props) => {
  if (!visible) return null;
  return (
    <div className="FullSceenProgress">
      <Icon viewBox="0 0 100 100">
        <circle
          cx="50"
          cy="50"
          fill="none"
          strokeLinecap="round"
          r="16"
          strokeWidth="8"
          stroke="currentColor"
          strokeDasharray="25.132741228718345 25.132741228718345"
          transform="rotate(126 50 50)"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            calcMode="linear"
            values="0 50 50;360 50 50"
            keyTimes="0;1"
            dur="1s"
            begin="0s"
            repeatCount="indefinite"
          />
        </circle>
      </Icon>
    </div>
  );
};

export default FullSceenProgress;
